const dialog = document.createElement('div');
const AppDocument = document.querySelector('#app');
function showDialog({title,content,confirm,cancel}){
  dialog.className = 'dialog';
  dialog.innerHTML = `
    <div class="dialog-mask"></div>
    <div class="dialog-content">
      <div class="dialog-title">${title}</div>
      <div class="dialog-body">${content}</div>
      <div class="dialog-footer">
        <button class="dialog-btn dialog-btn-cancel">取消</button>
        <button class="dialog-btn dialog-btn-confirm">确定</button>
      </div>
    </div>
  `;
  AppDocument.appendChild(dialog);
  dialog.querySelector('.dialog-btn-confirm').onclick = function(){
    console.log(this)
    this.style.pointerEvents = 'none';
    this.innerHTML = '请等待～'
    if(confirm){
      const bool = confirm();
      if(bool){ 
        AppDocument.removeChild(dialog);
      }
    }else{
      AppDocument.removeChild(dialog);
    }
    setTimeout(()=>{
      this.style.pointerEvents = 'auto';
      this.innerHTML = '确定'
    },1000)
  }
  dialog.querySelector('.dialog-btn-cancel').onclick = function(){
    if(cancel){
      const bool = cancel();
      if(bool){
        AppDocument.removeChild(dialog);
      }
    }else{
      AppDocument.removeChild(dialog);
    }
    
  }
}